var FeedItemView = Backbone.View.extend({
	tagName: "li",
	
	events: {
		"mouseenter"			: "onHover",
		"mouseleave" 			: "onLeave",
	},

    initialize: function (options) {
        _.bindAll(this);
        this.template = _.template($('#dish-feed-item-template').html());
		this.model.view = this;
    },

    render: function () {
		$(this.el).html(this.template(this.model.toJSON()));
		return this;
    },
	
	onHover: function () {
	},
	
	onLeave: function () {
	},
});



var PhotoView = Backbone.View.extend({
	tagName: "li",
	className: "dish-photo",
	
	events: {
		"mouseenter"			: "onHover",
		"mouseleave" 			: "onLeave",
	},

    initialize: function (options) {
        _.bindAll(this);
        this.template = _.template($('#dish-thumbnail-template').html());
		this.model.view = this;
    },

    render: function () {
		$(this.el).html(this.template(this.model.toJSON()));
		return this;
    },
	
	onHover: function () {
	},
	
	onLeave: function () {
	},
});



var RankView = Backbone.View.extend({
	tagName: "li",
	
	events: {
		"mouseenter"			: "onHover",
		"mouseleave" 			: "onLeave",
		"click span.dish-good"	: "createFromRankItem",
		"click span.dish-ok"	: "createFromRankItem",
		"click span.dish-bad"	: "createFromRankItem",	
		"click div.dish_item a:first"	: "displayDishPage",
	},

    initialize: function (options) {
        _.bindAll(this);
        // this.model.bind('change:title', this.changeTitle);
		this.template = _.template($('#rank-item-template').html());
		this.model.view = this;
		this.isMapView = options.isMapsView;
    },

    render: function () {
		$(this.el).html(this.template(this.model.toJSON()));
		return this;
    },
	
	onHover: function () {
		if (this.isMapView) {
			// activate map indicator
			if (this.model.marker.getAnimation() == null)
				this.model.marker.setAnimation(google.maps.Animation.BOUNCE);
		}
	},
	
	onLeave: function () {
		if (this.isMapView) {
			// deactivate map indicator
			this.model.marker.setAnimation(null);
		}
	},
	
	createFromRankItem: function () {
		window.RankApp.createFromRankItem({ 
			name: this.model.get('name'), 
			id: this.model.get('id'), 
			place: this.model.get('place'), 
			reviewText: "",
		});
	},
	
	displayDishPage: function () {
		var id = this.model.get('id');
		window.dishPage = new DishPageView({ dishId: id });
		return false; // prevent link load
	}
});

var MainAppView = Backbone.View.extend({


});

var DishMapView = Backbone.View.extend({
	events: {
		"mouseenter" : "onMarkerHover",
		"mouseleave" : "onMarkerLeave",
	},

    initialize: function (options) {
        _.bindAll(this);
		//this.template = _.template($('#dish-photo-template').html());
		this.model.view = this;
    },

    // render: function () {
		// $(this.el).html(this.template(this.model.toJSON()));
		// this.$(this.consts.PREF_BTN_CONTAINER_CLASS).hide();
		// this.$(this.consts.PREF_BTN_CONTAINER_CLASS + " button:first").button({
			// icons: {
				// primary: "ui-icon-locked"
			// }, text: false
		// }).next().button({
            // icons: {
                // primary: "ui-icon-locked"
            // }, text: false
        // }).next().button({
            // icons: {
                // primary: "ui-icon-gear",
            // }, text: false
        // });
		
		// // after rendering the DishView, set el for the corresponding TagCollectionView
		// this.model.tags.view.el = this.$(".tag_list");

		// return this;
    // },
	
	onMarkerHover: function () {
		// activate map indicator
		if (this.model.marker.getAnimation() == null)
			this.model.marker.setAnimation(google.maps.Animation.BOUNCE);
	},
	
	onMarkerLeave: function () {
		// deactivate map indicator
		this.model.marker.setAnimation(null);		
	},
});

var DishListView = Backbone.View.extend({

	// consts: {
		// "PREF_BTN_CONTAINER_CLASS" : ".pref_btn_container",
	// },

	events: {
		"mouseenter" : "onDishTileHover",
		"mouseleave" : "onDishTileLeave",
		//"click .good" : "submitLike",
		//"click .ok" : "submitOk",
		//"click .bad" : "submitDislike",
	},

    initialize: function (options) {
        _.bindAll(this);
        // this.model.bind('change:title', this.changeTitle);
		//this.template = _.template($('#dish-photo-template').html());
		this.model.view = this;
    },

    // render: function () {
		// $(this.el).html(this.template(this.model.toJSON()));
		// this.$(this.consts.PREF_BTN_CONTAINER_CLASS).hide();
		// this.$(this.consts.PREF_BTN_CONTAINER_CLASS + " button:first").button({
			// icons: {
				// primary: "ui-icon-locked"
			// }, text: false
		// }).next().button({
            // icons: {
                // primary: "ui-icon-locked"
            // }, text: false
        // }).next().button({
            // icons: {
                // primary: "ui-icon-gear",
            // }, text: false
        // });
		
		// // after rendering the DishView, set el for the corresponding TagCollectionView
		// this.model.tags.view.el = this.$(".tag_list");

		// return this;
    // },
	
	onDishTileHover: function () {

		// activate map indicator
		if (this.model.marker.getAnimation() == null)
			this.model.marker.setAnimation(google.maps.Animation.BOUNCE);
		
		// // fade preference buttons in
		// this.$(this.consts.PREF_BTN_CONTAINER_CLASS).fadeIn(50);
	},
	
	onDishTileLeave: function () {
		// deactivate map indicator
		this.model.marker.setAnimation(null);
		
		// // fade preference buttons out
		// this.$(this.consts.PREF_BTN_CONTAINER_CLASS).fadeOut(50);
	},
	
	// submitLike: function () {
		// this.model.url = "/action/liked/dish/" + this.model.id;
		// var btn1 = this.$(".good");
		// var btn2 = this.$(".ok");
		// var btn3 = this.$(".bad");
		
		// var temp_model = this.model;
		// var temp_template = this.quick_review_template;
		// var temp_el = $(this.el);
		// var self = this;
		// var old_html = $(this.el).html();
		// this.model.save({}, {
			// success: function (model, response) { 
				// btn1.addClass('active');
				// btn2.removeClass('active');
				// btn3.removeClass('active');
				
				// // display quick review screen
				// temp_el.html(temp_template(temp_model.toJSON()));
				// self.$(".publish_btn").button();
				// self.$(".cancel_btn").button();
				// // hook up hanlder for submit button
				// var temp_el2 = temp_el
				// self.$(".quick_review").submit(function () {
					// //self.model.url = "/submit/review/dish/" + self.model.id;
					// //self.model.save();
					// var data = {
						// text: temp_el2.find("#id_text").val(),
					// };
					// $.post("/submit/review/dish/" + self.model.id + "/", data, function (result) {
						// temp_el.html(old_html);
					// });
					// return false;
				// });
				// self.$(".cancel_btn").click(function () {
					// temp_el.html(old_html);
				// });
				// // write the view for handling adding a reivew...
				// // rerender the model
				
		// }, error: function (model, response) {
				// btn.html("error");
		// }});
		// //this.model.fetch();
	// },

	// submitOk: function () {
		// this.model.url = "/action/okd/dish/" + this.model.id;
		// var btn1 = this.$(".ok");
		// var btn2 = this.$(".good");
		// var btn3 = this.$(".bad");
		// this.model.save({}, {
			// success: function (model, response) { 
				// btn1.addClass('active');
				// btn2.removeClass('active');
				// btn3.removeClass('active');
		// }, error: function (model, response) {
				// btn.html("error");
		// }});
		// //this.model.fetch();
	// },

	// submitDislike: function () {
		// this.model.url = "/action/disliked/dish/" + this.model.id;
		// var btn1 = this.$(".bad");
		// var btn2 = this.$(".ok");
		// var btn3 = this.$(".good");
		// this.model.save({}, {
			// success: function (model, response) { 
				// btn1.addClass('active');
				// btn2.removeClass('active');
				// btn3.removeClass('active');
		// }, error: function (model, response) {
				// btn.html("error");
		// }});
		// //this.model.fetch();
	// }
});


var ReviewView = Backbone.View.extend({
	tagName: "li",
	className: "review_block",

	events: {
		"mouseenter" : "onReviewBlockHover",
		"mouseleave" : "onReviewBlockLeave",
	},

    initialize: function (options) {
        _.bindAll(this);
		this.template = _.template($('#review_template').html());
		this.model.view = this;
    },

    render: function () {
		$(this.el).html(this.template(this.model.toJSON()));
		return this;
    },
	
	onReviewBlockLeave: function () {
	},
});
